<template>
  <div>
    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <div class="grid-content bg-purple search">
          <el-input v-model="input" placeholder="基于姓名，手机号模糊查找"></el-input>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple">
          <el-button type="success" @click="checkout">导出选中的数据</el-button>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple">
          <router-link to="/upload">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </router-link>
        </div>
      </el-col>
    </el-row>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :border="true"
      @selection-change="selectChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="编号" type="index">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="phone" label="电话" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="data" label="创建时间" show-overflow-tooltip>
        <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
      </el-table-column>
    </el-table>
    <!--分页功能-->
  </div>
</template>

<script>
  // @ is an alias to /src
  import xlsx from "xlsx"
  export default {
    created() {
      let data = window.sessionStorage.getItem("excl") || [];
      data = data.length ? JSON.parse(data) : [];
      this.tabledata = data;
    },
    data() {
      return {
        input: "",//页面搜索框
        tabledata: [], //excel数据表
        selectData: [],  //选中导出的数据
        tabTata:[],   
        Time: null       //定时器
      }
    },
    watch: {
      input(el) {
        clearTimeout(this.Time)
        this.Time = setTimeout(() => {
          let arr = this.tabledata.filter((item) => {   
            if (Object.values(item).join("").includes(el)) {
              return item;
            }
          })
          this.tabTata = arr;
        }, 800);
      }
    },
    computed: {
      //并不是很好
      tableData() {
        if(this.input.length&&this.input.length>0){
          return this.tabTata;
        }else{
          return this.tabledata;
        }
      }
    },
    methods: {
      //导出数据
      checkout() {
        //
        let arr = this.selectData;
        if (arr.length <= 0) {
          return;
        }
        arr = arr.map((item) => {
          return {
            "姓名": item.name,
            "电话": item.phone,
            "时间": item.data
          }
        })

        let sheet = xlsx.utils.json_to_sheet(arr),
          book = xlsx.utils.book_new()
        //将选中的数据插入到book实例中
        xlsx.utils.book_append_sheet(book, sheet, 'Sheet1');
        //文件写入
        xlsx.writeFile(book, `user${new Date().getTime()}.xls`);
      },
      //选择得到想导出的数据
      selectChange(val) {
        this.selectData = val;
      }
    }
  }
</script>
<style lang="less" scoped>
  .row-bg {
    margin-bottom: 15px;

    .search {
      margin-right: 15px;
    }
  }
</style>